import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import { getScreenInfo } from '../../../../util/screen';
import { systemUtil } from '../../../../util/native';
import { APP_BLACK } from '../../../../constant/color';

const { width } = getScreenInfo({});
const bottomSafeHeight = systemUtil.getBottomSafeAreaHeight();

export default StyleSheet.create({
  container: {
    height: phonePx(60),
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderTopWidth: phonePx(1),
    borderTopColor: '#F4F4F4'
  },
  tab: {
    width: width / 3,
    height: phonePx(60),
    justifyContent: 'space-between'
  },
  firstTab: {
    alignItems: 'flex-start',
    paddingLeft: phonePx(40)
  },
  lastTab: {
    alignItems: 'flex-end',
    paddingRight: phonePx(40)
  },
  loadTab: {
    alignItems: 'center'
  },
  tabDesc: {
    fontSize: phonePx(10),
    color: APP_BLACK,
    fontWeight: '500',
    marginTop: phonePx(6),
    marginBottom: phonePx(13)
  },
  icon: {
    marginTop: phonePx(11)
  },
  bottomSafe: {
    height: bottomSafeHeight > 0 ? phonePx(14) : 0
  }
});
